input::-webkit-input-placeholder { /* WebKit browsers 适配谷歌 */
  color: $placehold;
}

// 滚动条的宽度
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
// 滚动条的滑块
::-webkit-scrollbar-thumb {
  background-color: rgba(144,147,153,.3);
  border-radius: 5px;
}



// ::-ms-scrollbar {
//   width: 6px;
//   height: 6px;
// }
// // 滚动条的滑块
// ::-ms-scrollbar-thumb {
//   background-color: rgba(144,147,153,.3);
//   border-radius: 5px;
// }
html, body {
  height: 100%;
  background: $bg;
  font-family: 'Bebas';

  // overflow-y: scroll;
  // scrollbar-color: #ff00ff;
  // scrollbar-track-color: #00ff00 ;
  // -ms-scrollbar-track-color: blue;
}


.mask {
  full(fixed);
  z-index: 1390;
  background: rgba(0, 0, 0, .6);
}

.dialog-foot {
  flexMiddle(space-around);
  min-height: getPx(50);
  width: 90%;
  margin: getPx(20) auto 0;
}

.dialog-foot-btn {
  cursor: pointer;
  width: getPx(160);
  height: getPx(50);
  font-size: $sub-font-size;
  background: $btn-bg;
  border-radius: $radius-sm;
  flexMiddle(center);
}

.unVisable {
  opacity: 0 !important;  
}

.absolute {
  position: absolute;  
}

.pointer {
  cursor: pointer;  
}

.primary {
  color: $primary !important;
}
.error {
  color: $error !important;
}
.success {
  color: $success !important;  
}
.warn {
  color: $warn !important;
}
.grey {
  color: $grey !important;  
}

.bg-success {
  background: $success !important;
}
.bg-error {
  background: $error !important;
}
.bg-warn {
  background: $warn !important;
}
.bg-grey {
  background: $grey !important;
}

.label-status {
  width: getPx(46);
  height: getPx(22);
  border-radius: $radius-ty;
  font-size: $sm-font-size;
  flexMiddle(center);
}

.page {
  color: #fff;
  background: $bg;
  overflow: hidden;
  full(absolute);
}

.close {
  cursor: pointer;
  color: $close;
  font-size: $big-font-size;
  position: absolute;
  top: getPx(10);
  right: getPx(30);
}

.sec {
  border-radius: $radius-sm;
  background: $sec-bg;
  //  display: flex
  // flex-direction: column
}

.sec-title {
  color: $sec-title-color;
  font-size: $sec-title-font-size;
}

.select {
  padding-left: 0;
  .opt {
    list-style: none;
    display: block;
    height: getPx(30);
    cursor: pointer;
    padding-left: getPx(15);
    flexMiddle(flex-start);
    &:hover {
      background: $sec-dark-bg;  
    }
  }
}

.select-box {
  li {
    line-height: getPx(24);
    cursor: pointer;
    user-select: none;
    padding: getPx(2) getPx(5);
    margin: getPx(4) 0;
    list-style: none;
    &:hover{
      background: #f0f5f9;
    }
  }
  .activeLi {
    background: #f0f5f9;
  }
}

.date-pick_select {
  width: 100%;
  height:40px;
}

.export-btn {
  width: getPx(80);
  height: getPx(28);
  border-radius: getPx(28);
  cursor: pointer;
  border: 1px solid $border-color;
  font-size: $sub-font-size;
  flexMiddle(center);
}

.singPicktime {
  width:getPx(160)
  .el-date-editor {
    width: 100%;
  }
}


// 设备详情状态样式

.device-box {
    // max-width:242px
    // height: getPx(340);
    height:getPx(410);
    background: $sec-dark-bg;
    cursor: pointer;
    border-radius: $radius-sm;
    margin: 0 getPx(20) getPx(20) 0;
    position: relative;
    padding: 0  getPx(20) getPx(20) getPx(20);
    &:hover {
      background: $sec-bg;
    }
    .device-status {
      position: absolute;
      top: 8px;
      right: 0;
      width: 50px;
      height: 20px;
      font-size: $sm-font-size;
      flexMiddle(center);
      &:before {
        content: '';
        width: 0;
        height: 0;
        position: absolute;
        left: -10px;
        top: 0;
        border-top: 10px solid transparent;
        border-right: 10px solid $success;
        border-bottom: 10px solid transparent;
      }
      &.bg-success {
        &:before {
          border-right: 10px solid $success;
        }
      }
      &.bg-error {
        &:before {
          border-right: 10px solid $error;
        }
      }
      &.bg-warn {
        &:before {
          border-right: 10px solid $warn;
        }
      }
      &.bg-grey {
        &:before {
          border-right: 10px solid $grey;;
        }
      }
    }
    .news {
        width:100%;
        height:getPx(99)
        border-top:1px solid #3E5066;
        overflow:hidden;
        padding-top:getPx(10);
        margin-top:getPx(10);
        box-sizing:border-box;
      }
    .control {
      position:absolute;
      bottom: getPx(30);
      right:getPx(10);
      cursor: pointer;
      width: getPx(35);
      height: getPx(35);
      border-radius: 50%;
      background: $air-kz-bg;
      flexMiddle(center);
      .control-ico {
        display: block;
        width: getPx(20);
        height: getPx(20);
      }
    }  
    .device-pic {
      height: getPx(165);
      width: 100%;
      .device-img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: contain; 
      }
    }
    .alias {
      font-size: getPx(20);
      margin-bottom: getPx(10);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .device-row {
      font-size: $sm-font-size;
      flexMiddle(space-between);
      // margin-bottom: getPx(10);
      .key {
        font-size: getPx(12);
        color: #A2AAB5;
        padding:0;
        width: auto;
        display: flex;
      }
      .val {
        font-size: getPx(14);
        height:getPx(28);
        line-height:getPx(28);
        width: 50%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }
  .focus {
    border-color: #409EFF
  }
  .picdevice-box {
    margin:0;
    padding: 0  getPx(20) getPx(15) getPx(20)
    background:rgba(22, 22, 22, 0);
    border-radius: 15px;
    height: auto;
    &:hover {
      background: $sec-bg;
    }
    .statesCount {
      display: flex;
      align-items: center;
      margin-top: getPx(10);
      .key {
        font-size: getPx(12);
      }
    }
    .device-pic {
      height: getPx(150);
      width: 100%;
    }
    .picdevice-status {
      height:getPx(26);
      width:getPx(55);
      font-size: getPx(12);
      text-align:center;
      line-height:getPx(26);
      border-radius:getPx(3);
    }
    
    .alias {
      font-size: getPx(20)
      margin-bottom: 0;
    }
    .news {
      border:0;
      height:auto;
      margin-top: 0;
      .val {
        text-align: center
      }
      .device-row {
      font-size: $sm-font-size;
      flexMiddle(space-between);
      // margin-bottom: getPx(10);
      .key {
        font-size: getPx(12);
        color: #A2AAB5;
        padding:0;
        width: auto;
        display: flex;
      }
      .val {
        font-size: getPx(14);
        height:getPx(28);
        line-height:getPx(28);
        width: auto;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        padding-right:getPx(15)
      }
    }
    }
  }
  .ellipCount {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
  }